<template>
  <div style="height: 700px;width: 100%">
    <!--<dv-charts :option="report"/>-->
    <e-charts auto-resize :options="report" @click='onClick' style="width: 100%;height: 500px"></e-charts>

    <div style="display: flex;flex-direction: row;justify-content: space-between;height: 200px;
        border: black 1px solid;background-color: antiquewhite;padding: 20px">
      <div style="display: flex;flex-direction: column;width: 25%">
        <div>起始位置</div>
        <el-input v-model="startData.mdu" :disabled="localDisable" placeholder="起始Water数量">
        </el-input>
        <el-input v-model="startData.usdt" :disabled="localDisable" placeholder="起始usdt数量">
        </el-input>
      </div>
      <div style="display: flex;flex-direction: column;width: 25%">
        <div>结束位置</div>
        <el-input v-model="endData.mdu" :disabled="localDisable" placeholder="结束Water数量">
        </el-input>
        <el-input v-model="endData.usdt" :disabled="localDisable" placeholder="结束usdt数量">
        </el-input>
      </div>
      <div style="display: flex;flex-direction: column;width: 25%">
        <div>操作</div>
        <div>
          <el-button type="primary" style="width: 50%" @click="cacls">计算</el-button>
        </div>
        <br/>
        <div>
          <el-button style="width: 50%" @click="clean">清空</el-button>
        </div>
      </div>
      <div style="display: flex;flex-direction: column;width: 25%">
        <div>结果</div>
        <el-input v-model="result.deltaMdu" :disabled="localDisable" placeholder="增量Water数量">
        </el-input>
        <el-input v-model="result.deltaUsdt" :disabled="localDisable" placeholder="增量Water数量">
        </el-input>
        <el-input v-model="result.avgPrice" :disabled="localDisable" placeholder="平均成本">
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAvgPrice
} from "@/api/platform/running";

import ECharts from 'vue-echarts';


let _self;

require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legendScroll');
export default {
  components: {ECharts},
  props: {
    platform: null,
    runningId: null,
  },
  data() {
    return {
      localDisable: true,
      startData: {
        mdu: '',
        usdt: '',
        index: ''
      },
      endData: {
        mdu: '',
        usdt: '',
        index: ''
      },
      result: {
        deltaMdu: '',
        deltaUsdt: '',
        avgPrice: ''
      },
      report: {
        grid: {left: 160, top: 30, right: 80, bottom: 80},
        tooltip: {
          confine: true,
          trigger: 'axis',
          alwaysShowContent: false,
          axisPointer: {type: 'line', lineStyle: {color: 'rgba(0, 0, 0, 0)'}},
          backgroundColor: '#355475',
          textStyle: {color: '#fff', fontSize: '14px'},
          extraCssText: 'box-shadow: 0 0 16px 0 rgba(0, 0, 0, .2);border-radius: 4px;',
          formatter: function (value) {
            let result = value[0].axisValue + '</br>';
            value.map(item => {
              if (item.value !== '') {
                result += item.seriesName + ':' + item.value + '</br>';
              }
            });
            return result;
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: [{
          name: "平均成本",
          type: 'value',
          position: 'left'
        }, {
          name: "Water增量",
          type: 'value',
          position: 'left',
          offset: 50
        }, {
          name: "usdt增量",
          type: 'value',
          position: 'left',
          offset: 100
        }],
        series: [{
          data: [],
          type: 'line',
          yAxisIndex: 0,
          name: 'avg',
          symbol: 'emptyCircle'
        }, {
          data: [],
          type: 'line',
          yAxisIndex: 1,
          name: 'Water',
          symbol: 'rect'
        }, {
          data: [],
          type: 'line',
          yAxisIndex: 2,
          name: 'usdt',
          symbol: 'diamond'
        }]
      }
    }
  },
  mounted() {
    _self = this;
    this.loadReport();
  },

  methods: {
    clean() {
      this.startData = {
        mdu: '',
        usdt: '',
        index: ''
      },
        this.endData = {
          mdu: '',
          usdt: '',
          index: ''
        },
        this.result = {
          deltaMdu: '',
          deltaUsdt: '',
          avgPrice: ''
        }
    },
    cacls() {
      if (this.checkStart() && this.checkEnd()) {
        this.result.deltaMdu = this.endData.mdu - this.startData.mdu;
        this.result.deltaUsdt = this.endData.usdt - this.startData.usdt;
        this.result.avgPrice = Number(this.result.deltaUsdt / this.result.deltaMdu).toFixed(4)
      }
    },

    checkStart() {
      return this.startData.mdu != '' && this.startData.usdt != ''
    },
    checkEnd() {
      return this.endData.mdu != '' && this.endData.usdt != ''
    },

    loadReport() {
      let start = new Date().getTime() - 1000 * 60 * 60 * 24
      getAvgPrice(this.runningId, {platform: this.platform, start: start}).then(res => {
        console.log('get report data')
        let xAxis = []
        let yData = []
        let yMData = []
        let yUData = []
        res.data.forEach(item => {
          xAxis.push(this.formartTime(item.timeStr))
          yData.push(item.avgPrice)
          yMData.push(Number(item.deltaMdu).toFixed(4))
          yUData.push(Number(item.deltaUsdt).toFixed(2))
        })

        // console.log('xAxis data is')
        // console.log(xAxis)
        // console.log(yData)

        _self.report.xAxis.data = xAxis
        _self.report.series[0].data = yData
        _self.report.series[1].data = yMData
        _self.report.series[2].data = yUData
      })
    },
    formartTime(ts) {
      var date = new Date(ts);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var hour = ("0" + date.getHours()).slice(-2),
        minute = ("0" + date.getMinutes()).slice(-2),
        second = ("0" + date.getSeconds()).slice(-2);

      var time = hour + ":" + minute + ":" + second;
      return time
    },
    onClick(params) {
      console.log(params)
      console.log(params.dataIndex)
      // let mdu = _self.report.series[0].data[params.dataIndex]
      let mdu = _self.report.series[1].data[params.dataIndex]
      let usdt = _self.report.series[2].data[params.dataIndex]
      console.log(mdu)
      console.log(usdt)

      if (!this.checkStart()) {
        this.startData.mdu = mdu
        this.startData.usdt = usdt;
        this.startData.index = params.dataIndex
      } else {
        if (params.dataIndex > this.startData.index) {
          this.endData.mdu = mdu
          this.endData.usdt = usdt;
          this.endData.index = params.dataIndex
        }
      }
    },
  }
}
</script>
